<template>
  <div class="container">
    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 头部 -->
      <el-row :gutter="10">
        <el-col :span="2">
          <span class="title-name">学科名称</span>
        </el-col>
        <el-col :span="5">
          <el-input
            placeholder="请输入内容"
            v-model="queryinfo.subjectName"
          ></el-input>
        </el-col>
        <el-col :span="8">
          <el-button @click="clearSearch">清除</el-button>
          <el-button type="primary" @click="loadList()">搜索</el-button>
        </el-col>
        <el-col :span="8" class="add-subject">
          <el-button
            type="success"
            icon="el-icon-edit"
            class="add-btn"
            @click="changeSubject(null, $event)"
            >新增学科</el-button
          >
        </el-col>
      </el-row>

      <!-- 警告栏 -->
      <el-alert
        :title="`数据一共有${total}条`"
        type="info"
        show-icon
        class="alert"
        :closable="false"
      >
      </el-alert>

      <!-- 表单 -->
      <el-table :data="subjectList" style="width: 100%" ref="subjectListRef">
        <el-table-column type="index" label="序号" />
        <el-table-column prop="subjectName" label="学科名称" />
        <el-table-column prop="username" label="创建者" />
        <el-table-column prop="addDate" label="创建日期" width="180">
          <template v-slot="{ row }">
            {{ row.addDate | parseTime }}
            <!-- parseTime -->
          </template>
        </el-table-column>
        <el-table-column label="前台是否显示">
          <template slot-scope="scope">
            <span v-if="scope.row.isFrontDisplay === 1">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录">
        </el-table-column>
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="totals" label="题目数量"></el-table-column>
        <el-table-column label="操作" width="280">
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              class="doing-item"
              @click="subjectClass(scope.row)"
              >学科分类</el-link
            >
            <el-link
              type="primary"
              :underline="false"
              class="doing-item"
              @click="subjectTag(scope.row)"
              >学科标签</el-link
            >
            <el-link
              type="primary"
              :underline="false"
              class="doing-item"
              @click="changeSubject(scope.row.id)"
              >修改</el-link
            >
            <el-link
              type="primary"
              :underline="false"
              class="doing-item"
              @click="removeSubject(scope.row.id)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        class="pagination"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryinfo.page"
        :page-sizes="[2, 10, 15, 20, 25]"
        :page-size="queryinfo.pagesize"
        layout=" prev, pager, next,sizes, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <el-dialog
      :visible.sync="DialogShow"
      width="30%"
      :title="id ? '编辑学科' : '添加学科'"
    >
      <!-- 添加编辑组件 -->
      <subjects-add
        v-if="DialogShow"
        :id="id"
        ref="addclick"
        @close="closeedit"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="DialogShow = false">取 消</el-button>
        <el-button type="primary" @click="dialogclick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, remove } from '@/api/hmmm/subjects'
// 添加组件
import subjectsAdd from '../components/subjects-add.vue'
export default {
  name: 'subject',
  components: { subjectsAdd },
  data() {
    return {
      // 请求参数
      queryinfo: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      total: 0,
      //   表单列表
      subjectList: [],

      DialogShow: false,
      id: ''
    }
  },
  created() {
    this.loadList()
  },
  methods: {
    //   加载列表
    async loadList() {
      try {
        const { data } = await list(this.queryinfo)
        this.subjectList = data.items
        this.total = data.counts
        // console.log(data)
      } catch (error) {
        this.$message('获取列表失败！')
      }
    },
    // 分页
    handleSizeChange(newPage) {
      this.queryinfo.pagesize = newPage
      this.queryinfo.page = 1
      this.loadList()
    },
    handleCurrentChange(newNum) {
      this.queryinfo.page = newNum
      this.loadList()
      //   页面条数改变时滚动到头部
      this.$nextTick(() => {
        console.log(this.$refs.subjectListRef.bodyWrapper)
        this.$refs.subjectListRef.bodyWrapper.scrollTop = 0
      })
    },
    // 清除
    clearSearch() {
      this.queryinfo.subjectName = ''
      this.loadList()
    },

    // 编辑、添加学科
    changeSubject(id) {
      this.id = id ? id : ''
      this.DialogShow = true
    },
    // 点击确定
    dialogclick() {
      this.$refs.addclick.btnclick()
    },
    // 点击确定关闭弹框
    closeedit() {
      this.DialogShow = false
      this.loadList()
      this.id = ''
    },
    //   删除根据id
    removeSubject(user) {
      this.$confirm('此操作将永久删除学科 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: user })
            .then(response => {
              this.$message.success('成功删除了学科' + '!')
              //   this.subjectList.splice(user, 1)
              //

              if (this.subjectList.length === 1) {
                this.queryinfo.page--
              }
              //   const totalPage = Math.ceil(
              //     (this.total - 1) / this.queryinfo.pagesize
              //   )
              //   this.queryinfo.page = this.queryinfo.page
              //     ? totalPage
              //     : this.queryinfo.page
              //   this.queryinfo.page =
              //     this.queryinfo.page < 1 ? 1 : this.queryinfo.page
              this.loadList()
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 学科分类、标签路由跳转
    subjectClass(info) {
      this.$router.push({
        path: '/subjects/directorys',
        query: { id: info.id }
      })
    },
    subjectTag(info) {
      this.$router.push({
        path: '/subjects/tags',
        query: { id: info.id }
      })
    }
  },
  mounted() {}
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container {
  .box-card {
    margin: 10px;
    padding: 0 10px;
    // 头部栏
    .title-name {
      padding-right: 5px;
      height: 36px;
      line-height: 36px;
      font-weight: 600;
    }
    .add-subject {
      //   position: relative;
      padding-left: 10px;
      .add-btn {
        position: absolute;
        right: 0;
      }
    }

    // 警示栏
    .alert {
      margin: 10px 0;
    }
    // 表单
    .doing-item {
      padding-left: 7px;
    }

    // 分页
    .pagination {
      float: right;
      margin: 10px 0;
    }
  }
}
</style>
